<template>
  <Main :type="'ordinary'">
    <div class="board">
      <div v-for="(item, index) in items" :key="index" class="board-box">
        <p class="board-title">
          <span>{{ item.title }}</span>
        </p>
        <ul class="grid-ul">
          <li
            v-for="(child, i) in item.children"
            :key="i"
            class="grad-li"
            :style="filtrate(child.tag)"
            @click="materialTab(child)"
          >
            <img
              v-if="child.img"
              :src="$store.state.qiniu + child.img"
              alt=""
            />
            <div>
              <p>{{ child.title }}</p>
              <span>{{ child.content }}</span>
            </div>
          </li>
        </ul>
      </div>
      <images-material
        :dialog-images="dialogImages"
        :use-btn="false"
        :use-type="'all'"
        @close="dialogImages = false"
      />
    </div>
  </Main>
</template>

<script>
import { MARKETLIST } from "@/service/public";

export default {
  components: {
    ImagesMaterial: r =>
      require.ensure([], () => r(require("publicCom/imgupdate")), "imgupdate")
  },
  data() {
    return {
      dialogImages: false,
      items: []
    };
  },
  created() {
    this.getList();
  },
  methods: {
    materialTab(e) {
      if (e.title === "素材库") {
        this.dialogImages = true;
      }
      if (e.url_lzc) {
        this.$router.push({ name: e.url_lzc });
      }
    },
    filtrate(tag) {
      if (tag) {
        return "cursor:pointer;";
      } else {
        return "";
      }
    },
    async getList() {
      await MARKETLIST().then(({ code, data, msg }) => {
        if (code === 200) {
          this.items = data;
        } else {
          this.$message.error(msg);
        }
      });
    }
  }
};
</script>

<style lang="scss" scoped>
.board {
  padding: 30px 40px;

  .board-box {
    margin-bottom: 10px;
    .board-title {
      line-height: 40px;
      font-size: 16px;
      font-weight: bold;
      color: #58585a;
      margin: 0 0 15px 10px;
      text-align: left;
      span {
        display: inline-block;
      }
    }
    .grid-ul {
      overflow: hidden;
      li {
        float: left;
        width: 330px;
        height: 92px;
        display: flex;

        color: #444444;
        background-color: #f7f8fa;
        padding: 16px;
        box-sizing: border-box;
        margin: 0 16px 16px 0;
        img {
          width: 60px;
          height: 60px;
          margin-right: 16px;
        }
        > div {
          flex: 1;
        }
        p {
          margin: 8px 0;
          font-size: 14px;
          font-weight: bold;
        }
        span {
          font-size: 12px;
          color: #969799;
        }
        &:last-child {
          text-align: center;
        }
      }
    }
  }
}
</style>
